<template>
  <van-popup v-model="popupShow" position="left" style="height: 100%;z-index: 1899">
    <div class="popup-wrap">
      <div class="logo-wrap">
        <img :class="['logo-img', isAr && 'top_logo_img']" :src="logo"
             :style="itemData.logoHeight && { height: itemData.logoHeight + 'px' }"/>
        <van-icon name="cross" size="24" @click="hide" />
      </div>
      <ul class="menu-wrap">
        <li v-for="v in menu" :key="v.key" @click="handleJump(v)">
          <a>{{ v.title }}</a>
        </li>
      </ul>
      <div class="account-wrap">
        <div class="account-wrap-left" @click="goMe">
          <div class="user-img">
            <img src="@/assets/image/navbar/user-white.png" alt=""/>
          </div>
          <span>{{ $t("个人中心") }}</span>
        </div>

        <el-dropdown trigger="click">
          <div class="account-wrap-right">
            <img class="cn-img" :src="languageIcon"/>
            <i class="el-icon-caret-top"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in lang" :key="index">
              <div class="lang-item" @click="handleSetLang(item.key)">
                <img :src="item.icon">
                <span>{{ item.title }}</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </van-popup>
</template>

<script>
import {Popup, Icon} from 'vant'
import { DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
import {mapMutations} from "vuex";
export default {
  name: 'VMenu',
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Dropdown.name]: Dropdown,
  },
  data() {
    return {
      itemName: process.env.VUE_APP_ITEM_NAME,
      itemData: this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME],
      isAr: localStorage.getItem("lang") === "ar",
      popupShow: false,
      menu: [
        {
          key: '1',
          path: '/home',
          title: this.$t("首页"),
          isLink: false
        },
        {
          key: '2',
          path: '/commodity',
          title: this.$t("分类"),
          isLink: false
        },
        {
          key: '3',
          path: '/loan',
          title: this.$t("信贷服务"),
          isLink: false
        },
        {
          key: '4',
          path: '/merchantSettled',
          title: this.$t("商家入驻"),
          isLink: false
        },
        // {
        //   key: '5',
        //   path: '/home',
        //   title: this.$t("联系我们"),
        // },
        {
          key: '5',
          path: this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME].app_url,
          title: this.$t("商家登录"),
          isLink: true
        },
        {
          key: '6',
          path: '/information',
          title: this.$t("在线客服"),
          isLink: false
        },
      ],
      lang: [
        {
          title: "English",
          key: "en",
          icon: require("@/assets/image/language/usa.png"),
        },
        {
          title: "Deutsch",
          key: "de",
          icon: require("@/assets/image/language/de.png"),
        },
        {
          title: "français",
          key: "fr",
          icon: require("@/assets/image/language/fr.png"),
        },
        {
          title: "Русский",
          key: "ru",
          icon: require("@/assets/image/language/ru.png"),
        },
        {
          title: "Español",
          key: "es",
          icon: require("@/assets/image/language/es.png"),
        },
        {
          title: "Português",
          key: "pt",
          icon: require("@/assets/image/language/pt.png"),
        },
        {
          title: "Italiano",
          key: "it",
          icon: require("@/assets/image/language/it.png"),
        },
        {
          title: "Melayu",
          key: "ms",
          icon: require("@/assets/image/language/ms.png"),
        },
        {
          title: "Afrikaans",
          key: "af",
          icon: require("@/assets/image/language/af.png"),
        },
        {
          title: "Ελληνικά",
          key: "el",
          icon: require("@/assets/image/language/el.png"),
        },
        {
          title: "繁體中文",
          key: "tw",
          icon: require("@/assets/image/language/tw.png"),
        },
        {
          title: "简体中文",
          key: "cn",
          icon: require("@/assets/image/language/cn.png"),
        },
        {
          title: "Türkçe",
          key: "tr",
          icon: require("@/assets/image/language/tr.png"),
        },

        {
          title: "日本語",
          key: "ja",
          icon: require("@/assets/image/language/ja.png"),
        },
        {
          title: "한국어",
          key: "ko",
          icon: require("@/assets/image/language/ko.png"),
        },
        {
          title: "ภาษาไทย",
          key: "th",
          icon: require("@/assets/image/language/th.png"),
        },
        {
          title: "Filipino",
          key: "ph",
          icon: require("@/assets/image/language/ph.png"),
        },
        {
          title: "عربي",
          key: "ar",
          icon: require("@/assets/image/language/ar.png"),
        },
        {
          title: "Tiếng Việt",
          key: "vi",
          icon: require("@/assets/image/language/vi.png"),
        },
        {
          title: "हिंदी",
          key: "hi",
          icon: require("@/assets/image/language/hi.png"),
        },
        {
          title: "bahasa Indonesia",
          key: "id",
          icon: require("@/assets/image/language/id.png"),
        },
      ],
    }
  },
  computed: {
    logo() {
      if (this.itemName == 'EShop') {
        return require(`@/assets/${process.env.VUE_APP_ITEM_NAME}/logo-h.${this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME].suffix}`)
      }
      return require(`@/assets/${process.env.VUE_APP_ITEM_NAME}/logo.${this.$store.state.multiItem[process.env.VUE_APP_ITEM_NAME].suffix}`)
    },
    languageIcon() {
      let language = localStorage.getItem('lang') || "en";
      if (language == 'en-US' || language == '"en-US"') {
        language = 'en'
      } else if (language == 'zh-CN' || language == "'zh-CN'") {
        language = 'cn'
      } else if (language == 'zh-TW' || language == "'zh-TW'") {
        language = 'tw'
      }
      const icon = {
        "cn": require("@/assets/image/language/cn.png"),
        "en": require("@/assets/image/language/usa.png"),
        "tw": require("@/assets/image/language/tw.png"),
        "de": require("@/assets/image/language/de.png"),
        "ja": require("@/assets/image/language/ja.png"),
        "ms": require("@/assets/image/language/ms.png"),
        "th": require("@/assets/image/language/th.png"),
        "pt": require("@/assets/image/language/pt.png"),
        "es": require("@/assets/image/language/es.png"),
        "ru": require("@/assets/image/language/ru.png"),
        "el": require("@/assets/image/language/el.png"),
        "it": require("@/assets/image/language/it.png"),
        "tr": require("@/assets/image/language/tr.png"),
        "af": require("@/assets/image/language/af.png"),
        "fr": require("@/assets/image/language/fr.png"),
        "ko": require("@/assets/image/language/ko.png"),
        "ph": require("@/assets/image/language/ph.png"),
        "ar": require("@/assets/image/language/ar.png"),
        "vi": require("@/assets/image/language/vi.png"),
        "hi": require("@/assets/image/language/hi.png"),
        "id": require("@/assets/image/language/id.png"),
      };
      return language ? icon[language] : icon['en'];
    },
  },
  methods: {
    ...mapMutations(["setLanguage"]),
    show() {
      this.popupShow = true
    },
    hide() {
      this.popupShow = false
    },
    handleJump(v) {
      if (v.isLink) {
        window.open(v.path)
      } else {
        this.$router.push(v.path)
      }
      this.popupShow = false
    },
    handleSetLang(lang) {
      // if(index > 2) return this.$notify(this.$t('暂不支持该语言'))
      // 设置i18n.locale 组件库会按照上面的配置使用对应的文案文件
      this.$i18n.locale = lang;
      // 提交mutations
      this.setLanguage(lang);
      if (lang == 'ar') {
        document.documentElement.setAttribute('dir', 'rtl');

      } else {
        document.documentElement.setAttribute('dir', 'ltr');
      }
      window.location.reload();
    },
    goMe() {
      this.popupShow = false
      this.$router.push('/me')
    }
  }
}
</script>
<style lang="scss">
.el-dropdown-menu {
  height: 300px !important;
  overflow-y: auto !important;
  z-index: 2010 !important;
}
</style>
<style scoped lang="scss">
.popup-wrap{
  width: 300px;
  height: 100%;
  position: relative;
  .logo-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 15px;
    .logo-img {
      width: auto;
      height: 50px;
    }
    .top_logo_img {
      transform: scaleX(-1) !important;
    }
  }
  .menu-wrap{
    overflow: auto;
    >li{
      border-bottom: 1px solid #e4e4e4;
      >a{
        color: #333;
        font-size: 14px;
        display: block;
        padding: 15px 20px;
        text-transform: uppercase;
      }
    }
    >li:first-child{
      border-top: 1px solid #e4e4e4;
    }
  }
  .account-wrap{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 25px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left{
      display: flex;
      align-items: center;
      .user-img{
        width: 30px;
        height: 30px;
        background-color: #d62014;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        >img{
          width: 19px;
          height: 19px;
        }
      }
      >span{
        font-size: 16px;
        font-weight: 600;
      }
    }
    &-right{
      display: flex;
      align-items: center;
      .cn-img{
        width: 30px;
        height: 30px;
        margin-right: 5px;
      }
      >i{
        font-size: 16px;
        color: #606266;
      }
    }
  }
}
.lang-item{
  display: flex;
  align-items: center;
  >img{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-right: 8px;
  }
  >span{
    font-size: 14px;
    color: #606266;
  }
}

</style>
